<template>
    <div ref="chart" style="width: 100%;height: 238px;">
    </div>
</template>
<script>
export default {
  data () {
    return {
      // myChart: null
    }
  },
  props: {
    // tit: {
    //   type: String,
    //   default: '标题'
    // },
    viewData: {
      data: [],
      date: [],
      tit: ''
    }
  },
  watch: {
    viewData: {
      handler (val) {
        // 判断传入的option是否有内容
        if (Object.keys(val).length) {
          this.$nextTick(() => {
            const myChart = this.initChart();
            const option = {
              title: {
                text: this.viewData.tit,
                x: 'center',
                y: '10px',
                textStyle: {
                // 文字颜色
                  color: '#FFF'
                }
              },
              xAxis: {
                type: 'category',
                data: this.viewData.date
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: this.viewData.data,
                  type: 'line',
                  label: {
                    show: false
                  },
                  emphasis: {
                    label: {
                      show: true
                    }
                  }
                }
              ]
            };
            myChart.setOption(option);
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  created () {
  },
  mounted () {

  },
  methods: {
    initChart () {
      // 如果已有实例，则先清理
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(this.$refs.chart);

      // 当窗口大小改变 echarts重置大小
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
      return this.myChart;
    }

  }
  // beforeDestroy () {
  //   if (this.myChart) {
  //     this.myChart.dispose();
  //   }
  // }
}
</script>
<style  scoped>

</style>
